import React, {useEffect, useState} from "react";
import {IPage, ObjInfo, PojInfoDto} from "@/api/Types/ObjInterfaces.ts";
import {Button, Empty, Modal, Pagination} from "antd";
import objApi from "@/api/ObjApi.ts";
import {createStyles} from "antd-style";
import PojApi from "@/api/PojApi.ts";
import pojApi from "@/api/PojApi.ts";

interface Props {
    open: boolean,
    setOpen: (open: boolean) => void,
    pojId: string
}

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            display: block;
        `
    }
})

let _currentPage = 0
let _pageSize = 10

const AddObjToPojModal: React.FC<Props> = ({open, setOpen, pojId}) => {
    const [objInfoPage, setObjInfoPage] = useState<IPage<ObjInfo>>(null)
    const [selectedMap, setSelectedMap] = useState<Map<string, ObjInfo>>(new Map())
    const [selectPoj, setSelectPoj] = useState(null)
    const styles = useStyles().styles;

    const refreshData = (currentPage: number, pageSize: number) => {
        objApi.pageAllObj(currentPage, pageSize).then((data) => {
            setObjInfoPage(data)
            if (pojId != null) {
                PojApi.getPojById(pojId).then(data => {
                    const map = new Map<string, ObjInfo>()
                    data.objInfoList.forEach(item => {
                        map.set(item.id, item)
                    })
                    setSelectedMap(map)
                    setSelectPoj(data)
                })
            }
        })
        _currentPage = currentPage
        _pageSize = pageSize
    }

    useEffect(() => {
        refreshData(1, 10)
    }, [pojId]);

    if (selectPoj == null) {
        return (
            <Modal
                open={open}
                onCancel={() => {
                    setOpen(false)
                }}
                onOk={() => {
                    setOpen(false)
                }}
                footer={null}
            >
                <Empty/>
            </Modal>
        )
    }

    return (
        <Modal
            open={open}
            onCancel={() => {
                setOpen(false)
            }}
            onOk={() => {
                setOpen(false)
            }}
            footer={null}
        >
            <div className={styles.container}>
                <ul>
                    {
                        objInfoPage.records.map(item => {
                            if (selectedMap.has(item.id)) {
                                return (
                                    <li
                                        key={item.id}
                                    >
                                        <Button
                                            type='dashed'
                                            onClick={() => {
                                                PojApi.removeObjFromPoj([item.id], selectPoj.id).then(() => {
                                                    refreshData(_currentPage, _pageSize)
                                                })
                                            }}
                                        >
                                            {item.objName}
                                        </Button>
                                    </li>
                                )
                            }
                            return (
                                <li
                                    key={item.id}
                                >
                                    <Button
                                        type='primary'
                                        onClick={() => {
                                            PojApi.addObjToPoj([item.id], selectPoj.id).then(() => {
                                                refreshData(_currentPage, _pageSize)
                                            })
                                        }}
                                    >
                                        {item.objName}
                                    </Button>
                                </li>
                            )
                        })
                    }
                </ul>
                <Pagination
                    size="small"
                    current={objInfoPage.current}
                    total={objInfoPage.total}
                    onChange={(page, pageSize) => {
                        refreshData(page, pageSize)
                    }}
                    pageSize={10}
                />
            </div>
        </Modal>
    )
}

export default AddObjToPojModal